<template>
  <div class="bigBox">
    <div class="goodesmodelbox">
      <el-dialog
        :showClose="false"
        title="申请列表"
        :visible.sync="centerDialogVisible"
        height="100%"
        top
        width="98%"
        :fullscreen="true"
      >
        <div class="topSearch">
          <div class="topSearchLeft">
            <div>
              <p>商品名称:</p>
              <el-input
                v-model="goodsName"
                :style="{ width: '260px', marginLeft: '20px' }"
                placeholder="商品名称"
                clearable
                @clear="clearHandle"
              ></el-input>
            </div>
            <div>
              <p>申请状态:</p>
              <el-select
                v-model="applyStatus"
                :style="{ width: '260px', marginLeft: '20px' }"
                clearable
                @clear="clearHandle"
                filterable
                placeholder="申请状态"
              >
                <el-option
                  v-for="(item, i) in applyStatusList"
                  :key="i"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="topSearchRight">
            <el-button
              type="primary"
              :style="{ marginLeft: '20px' }"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-button :style="{ marginLeft: '20px' }" @click="resettingHandle">
              重置
            </el-button>
          </div>
        </div>

        <div>
          <!-- <el-input
            v-model="goodsName"
            :style="{ width: '260px', marginLeft: '20px' }"
            placeholder="商品名称"
            clearable
            @clear="clearHandle"
          ></el-input>
          <el-select
            v-model="applyStatus"
            :style="{ width: '260px', marginLeft: '20px' }"
            clearable
            @clear="clearHandle"
            filterable
            placeholder="申请状态"
          >
            <el-option
              v-for="(item, i) in applyStatusList"
              :key="i"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <!-- <el-button
            :style="{ marginLeft: '20px' }"
            circle
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button> -->
        </div>

        <!-- <div style="margin-top: 10px; margin-bottom: 10px">
        <el-button
          style="margin-left: 20px"
          :disabled="isButtonDisabled"
          @click="bulkOperation(2)"
          >通过</el-button
        >
        <el-button :disabled="isButtonDisabled" @click="bulkOperation(3)"
          >拒绝</el-button
        >
      </div> -->
        <div class="tableBox">
          <div class="topButton">
            <div class="topButtonLeft">
              <el-button
                type="primary"
                style="margin-left: 20px"
                @click="bulkOperation(2)"
                >通过</el-button
              >
              <el-button type="primary" @click="bulkOperation(3)"
                >拒绝</el-button
              >
              <el-button @click="cancelgoodesmodel">取 消</el-button>
              <!-- <el-button type="primary" @click="saveActiveHandle">确 定</el-button> -->
            </div>
            <div class="topButtonRight">
              <el-button
                circle
                icon="el-icon-refresh-right"
                @click="RefreshHandle"
              >
              </el-button>
            </div>
            <!-- <div>当前表格已选择{{ this.selectedRows.length }}项</div> -->
            <!-- <el-button class="shuxin" round size="mini" @click="RefreshHandle"
            >刷新
          </el-button> -->
          </div>
          <div class="divBox">
            <el-table
              v-loading="loading"
              :cell-style="{ 'text-align': 'center' }"
              :data="goodsList"
              :header-cell-style="{ 'text-align': 'center' }"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column fixed label="排序" prop="sort" width="70">
                <template slot-scope="scope">
                  <div class="flex-container">
                    <span class="flex-item">
                      <!-- 序号 -->
                      {{ scope.$index + 1 }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="goodsName">
              </el-table-column>
              <el-table-column label="店铺名称" prop="mallName">
              </el-table-column>
              <el-table-column
                label="活动库存"
                prop="activityStock"
                v-if="this.enterType === 8"
              >
              </el-table-column>
              <el-table-column label="单价/元" prop="price">
                <template slot-scope="scope">
                  {{ scope.row.price / 100 }}
                </template>
              </el-table-column>
              <el-table-column
                label="活动价格/元"
                prop="activityPrice"
                v-if="this.enterType === 8"
              >
                <template slot-scope="scope">
                  {{ scope.row.activityPrice / 100 }}
                </template>
              </el-table-column>
              <el-table-column
                label="规格"
                prop="levelPath"
                v-if="this.enterType === 8"
              >
              </el-table-column>
              <el-table-column label="申请状态" prop="status">
                <template slot-scope="scope">
                  {{ getStatusText(scope.row.status) }}
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="400">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="text"
                    @click="byRejectingHandle(scope.row, 2)"
                    v-if="scope.row.status == 1 || scope.row.status == 3"
                    >通过</el-button
                  >
                  <el-button
                    size="small"
                    type="text"
                    @click="byRejectingHandle(scope.row, 3)"
                    v-if="scope.row.status == 2"
                    >拒绝</el-button
                  >
                  <el-button
                    size="small"
                    type="text"
                    @click="chakanHandle(scope.row)"
                    >查看店铺</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="paging">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            layout="sizes,total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div> -->
          <div class="paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <!--<span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="bulkOperation(2)"
            >通过</el-button
          >
          <el-button type="primary" @click="bulkOperation(3)">拒绝</el-button>
          <el-button @click="cancelgoodesmodel">取 消</el-button>
         <el-button type="primary" @click="saveActiveHandle">确 定</el-button> 
        </span>-->
      </el-dialog>
      <StoreInfo
        v-if="centerDialogVisible2"
        :centerDialogVisible="centerDialogVisible2"
        :currentRow="currentRow2"
        :enterType="enterType2"
        @cancelgoodesmodel="cancelgoodesmodel2"
      />
    </div>
  </div>
</template>

<script>
import { cloud } from "@/framework/utils/request";
import StoreInfo from "@/views/mall/managementend/memberList/components/Storeinfo.vue";
import {
  GetGoodsList,
  batchUpdateApply,
  QueryStoreInfo,
  FlashActiveGoods,
} from "@/api/mallApi/managementend/marketing";

export default {
  name: "ApplyFor",
  components: {
    StoreInfo,
  },
  props: {
    centerDialogVisible: Boolean,
    currentRow: Object,
    enterType: Number,
    cancelSubmit: Number,
  },
  data() {
    return {
      isButtonDisabled: false, // checkbox 联动按钮
      selectedRows: [], // 表格 多选内容
      applyStatusList: [
        //审核状态：1-待审核；2-通过；3-拒绝
        { name: "拒绝", value: 3 },
        { name: "待审核", value: 1 },
        { name: "审核通过", value: 2 },
      ],
      applyStatus: "",
      goodsName: "",
      loading: false,
      goodsList: [],
      currentPage: 1, // 分页
      total: 0,
      pageSize: 10,
      currentRow2: [],
      centerDialogVisible2: false,
      enterType2: 0,
    };
  },
  methods: {
    //重置
    resettingHandle() {
      this.goodsName = null;
      this.applyStatus = null;
      this.RefreshHandle();
    },
    async chakanHandle(row) {
      try {
        const param = {
          mallCode: row.mallCode,
          // mallCode: "un0m55sksm",
        };
        // 调用 GoodsDetail 函数，并等待其完成
        this.loading = true;
        const res = await QueryStoreInfo(param);
        console.log("店铺详情信息", res);
        this.loading = false;
        this.currentRow2 = res.data;
        this.enterType2 = 2;
        this.centerDialogVisible2 = true; // 打开弹窗
      } catch (error) {
        this.loading = false;
        console.error("处理错误", error);
      }
    },
    cancelgoodesmodel2() {
      this.enterType2 = 0;
      this.centerDialogVisible2 = false;
    },
    clearHandle() {
      this.getGoodsListHandle();
    },
    RefreshHandle() {
      this.getGoodsListHandle();
    },
    handleSearch() {
      this.currentPage = 1;
      this.getGoodsListHandle();
    },
    saveActiveHandle() {},
    cancelgoodesmodel() {
      this.$emit("cancelgoodesmodel", false);
    }, // 取消按钮 传值
    getGoodsListHandle() {
      this.loading = true;
      const params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        activeId: this.currentRow.id,
        status: this.applyStatus,
        goodsName: this.goodsName,
      };

      if (this.enterType === 8) {
        console.log("进到上面了");
        FlashActiveGoods(params)
          .then((res) => {
            if (res.code !== "00000") return;
            console.log("8---", res);
            this.goodsList = res.data.rows;
            this.total = parseInt(res.data.totalRows);
            this.loading = false;
          })
          .catch((error) => {
            this.loading = false;
          });
      } else {
        console.log("进到下面了");
        GetGoodsList(params)
          .then((res) => {
            if (res.code !== "00000") return;
            console.log("!!8---", res);
            this.goodsList = res.data.rows;
            this.total = parseInt(res.data.totalRows);
            this.loading = false;
          })
          .catch((error) => {
            this.loading = false;
          });
      }
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      // TODO 在这里进行相应的操作，如发起请求等
    }, // 表格多选
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoodsListHandle();
    },
    handleCurrentChange(val) {
      // 分页
      this.currentPage = val;
      this.getGoodsListHandle();
    },
    getStatusText(Status) {
      // 审核状态：1-待审核；2-通过；3-拒绝
      switch (Status) {
        case "1":
          return "待审核";
        case "2":
          return "通过";
        case "3":
          return "拒绝";
        default:
          return "未知";
      }
    },
    bulkOperation(e) {
      const ids = [];
      this.selectedRows.forEach((item) => {
        ids.push(item.id);
      });
      const data = {
        ids: ids,
        status: e,
      };

      if (ids.length === 0) {
        this.$message({
          message: "请选择商品！！",
          type: "warning",
        });
        return;
      }

      batchUpdateApply(data).then((res) => {
        if (res.code !== "00000") return;
        this.getGoodsListHandle();
        this.$message({
          message: "商品审核状态修改成功！",
          type: "success",
        });
      });
    },
    byRejectingHandle(row, e) {
      const data = {
        ids: [row.id],
        status: e,
      };
      batchUpdateApply(data).then((res) => {
        if (res.code !== "00000") return;
        this.getGoodsListHandle();
        this.$message({
          message: "商品审核状态修改成功！",
          type: "success",
        });
      });
    },
  },
  mounted() {},
  created() {
    this.getGoodsListHandle();
    console.log(this.enterType);
  },
  watch: {
    centerDialogVisible(newVal) {
      // 监听 centerDialogVisible 的变化
      if (!newVal) {
        // 当 centerDialogVisible 变为 false 时触发事件
        this.$emit("close-dialog");
      }
    },
    selectedRows: {
      handler(newValue) {
        // 数组发生变化时，isButtonDisabled计算属性会重新计算，从而更新按钮的禁用状态
        this.isButtonDisabled = newValue.length === 0;
      },
      deep: true,
      immediate: true, // 立即执行处理函数
    },
  },
};
</script>

<style lang="scss" scoped>
.goodesmodelbox {
  .topSearch {
    width: 98%;
    margin: 1%;
    min-height: 80px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    .topSearchLeft {
      width: 1150px;
      display: flex;
      margin-left: 10px;
      > div {
        display: flex;
        align-items: center;
        p {
          font-size: 14px;
        }
        margin-left: 10px;
      }
    }
    .topSearchRight {
      width: 15%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .topButton {
    width: 100%;
    min-height: 65px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .topButtonLeft {
      margin-top: 10px;
      margin-left: 5px;
    }
    .topButtonRight {
      margin-top: 10px;
      margin-right: 30px;
    }
    // position: relative;

    // > div:nth-child(1) {
    //   width: 1200px;
    //   font-size: 16px;
    //   margin-left: 20px;
    //   margin-bottom: 10px;
    //   margin-top: 10px;
    //   background-color: #ecf5ff;
    //   border-color: #d9ecff;
    //   display: inline-block;
    //   height: 32px;
    //   padding: 0 10px;
    //   line-height: 30px;
    //   color: #409eff;
    //   border-width: 1px;
    //   border-style: solid;
    //   border-radius: 4px;
    //   box-sizing: border-box;
    //   white-space: nowrap;
    //   letter-spacing: 5px;
    // }
    // .shuxin {
    //   position: absolute;
    //   right: 20px;
    // }
  }
  .tableBox {
    width: 100%;
    min-height: 750px;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
    background: #fff;
    .divBox {
      width: 98%;
      margin-left: 1%;
      margin-bottom: 15px;
      border: 1px solid #dcdee2;
    }
    .paging {
      width: 99%;
      height: 50px;
      margin-bottom: 15px;
      // background-color: antiquewhite;
      display: flex;
      align-items: end;
      justify-content: end;
    }
  }
}
</style>
